<template>
	<view>
		<u-sticky offset-top="0">
			<u-tabs :list="list" :is-scroll="false" bar-width="100" :current="current" @change="change"></u-tabs>
		</u-sticky>

		<!-- 全部 -->
		<view class="list" v-show="current==i.type" v-for="i in orders" :key="i.type">
			<my-order :date="j.created_at" :img="j.product_pic" :title="j.product_name" :price="j.total_price" :subTitle="j.merchant.merchant_name"
			 :status="j.status_text" v-for="j in i.list" :key="j.id" @click.native="$goto('/pages/order/detail?no='+j.trade_no)">
				<template v-slot:btns>
					<view class="my-order-btn on" v-if="j.status == -1 && j.can_pay == 1" @click.stop="$goto('/pages/order/create?no=' + j.trade_no)">填写订单</view>
					<view class="my-order-btn" v-if="j.status == -1" @click.stop="cancelModal=true,no=j.trade_no">取消订单</view>
					<view class="my-order-btn on" v-if="j.status == -1 && j.can_pay > 1" @click.stop="$goto('/pages/order/pay?no=' + j.trade_no)">去付款</view>
					<view class="my-order-btn on" v-if="j.status>3 && j.paid_status==0" @click.stop="$goto('/pages/order/pay?no=' + j.trade_no + '&rest=1')">付尾款</view>
					<view class="my-order-btn on" v-if="j.status == 7" @click.stop="$goto('/pages/comment/submit?no='+j.trade_no)">去评价</view>
				</template>
			</my-order>
			
			<!-- 取消订单 -->
			<u-modal v-model="cancelModal" content="确定取消该订单？" show-cancel-button @confirm="cancelOrder" @cancel="cancelModal=false"></u-modal>

			<view class="padding-tb">
				<u-loadmore :status="i.status" bg-color="#EFF1F4"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no: '',
				cancelModal: false,
				list: [{
					name: '全部'
				}, {
					name: '未付款'
				}, {
					name: '已付款'
				}, {
					name: '已完成'
				}],
				current: 0,
				orders: [{
					type: 0,
					page: 1,
					list: [],
					status: 'loadmore'
				}, {
					type: 1,
					page: 1,
					list: [],
					status: 'loadmore'
				}, {
					type: 2,
					page: 1,
					list: [],
					status: 'loadmore'
				}, {
					type: 3,
					page: 1,
					list: [],
					status: 'loadmore'
				}]
			}
		},
		onLoad() {
			this.getList(this.current);
		},
		onReachBottom() {
			this.getList(this.current);
		},
		onPullDownRefresh() {
			this.getList(this.current, true);
		},
		methods: {
			change(index) {
				this.current = index;
				this.getList(this.current, true);
			},
			getList(type, clear = false) {
				if (clear) {
					this.orders[type].page = 1
					this.orders[type].list = []
				}
				let page = this.orders[type].page
				if (page) {
					this.orders[type].status = 'loading'
					this.$u.get('/order/list?type=' + type + '&page=' + page).then(res => {
						let order = res.data.result.order
						if (page < order.last_page) {
							this.orders[type].page++
							this.orders[type].list = [...this.orders[type].list, ...order.data]
							this.orders[type].status = 'loadmore'
						} else if (page == order.last_page) {
							this.orders[type].page = 0
							this.orders[type].list = [...this.orders[type].list, ...order.data]
							this.orders[type].status = 'nomore'
						}
					})
				}
				uni.stopPullDownRefresh();
			},
			cancelOrder() {
				uni.showLoading({
					title: '取消中...',
					mask: true
				})
				this.$u.get('/order/cancel?trade_no='+this.no).then(res => {
					this.$msg(res.data.msg, 1000, true)
					setTimeout(() => {
						this.$goto('/pages/order/list', 'redirect')
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
